type Theme = "light" | "dark";
export default function useTheme() {
  function setTheme(theme: Theme) {
    const root = document.documentElement;
    // 根据主题设置 CSS 变量
    if (theme === "dark") {
      root.style.setProperty("--app-primary", "#4f46e5");
      root.style.setProperty("--app-secondary", "#a855f7");
      root.style.setProperty("--app-background", "#1a1a1a");
      root.style.setProperty("--app-text", "#ffffff");
    } else {
      root.style.setProperty("--app-primary", "#2563eb");
      root.style.setProperty("--app-secondary", "#7c3aed");
      root.style.setProperty("--app-background", "#f8fafc");
      root.style.setProperty("--app-text", "#1e293b");
    }
    // 保存到 LocalStorage
    LocalStorage.setItem("theme", theme);
  }

  // 初始化主题
  function initTheme() {
    const savedTheme = (LocalStorage.getItem("theme") as Theme) || "light";
    setTheme(savedTheme);
    return savedTheme;
  }

  const currentTheme = ref(initTheme());

  const toggleTheme = () => {
    const newTheme = currentTheme.value === "light" ? "dark" : "light";
    setTheme(newTheme);
    currentTheme.value = newTheme;
  };

  return { toggleTheme, setTheme, initTheme, currentTheme };
}
/*<script lang="ts" setup>
const { toggleTheme, currentTheme } = useTheme();
</script>
<template>
  <button @click="toggleTheme">切换主题 (当前: {{ currentTheme }})</button>
  <div class="bg-app-background text-app-text p-4">
    <h1 class="text-app-primary">标题</h1>
    <p class="text-app-secondary">内容...</p>
    <!-- 使用文本颜色 -->
    <div class="text-app-primary">主要文本</div>
    <div class="text-app-secondary">次要文本</div>

    <!-- 使用背景颜色 -->
    <div class="bg-app-primary">背景</div>
    <!-- 使用边框颜色 -->
    <div class="border border-primary">带边框的元素</div>
  </div>
</template>*/
